<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="main">
            <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
                <el-tab-pane label="待认证司机" name="first" v-if="permissions.false.perms != null">
                    <div class="main_item">
                        <waitPassList ref="first"></waitPassList>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="不通过司机" name="second" v-if="permissions.false.perms != null">
                    <div class="main_item">
                        <noPassList ref="second"></noPassList>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已认证司机" name="third" v-if="permissions.list.perms != null">
                    <div class="main_item">
                        <certifiedList ref="third"></certifiedList>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import certifiedList from "@/views/driver/DriverListChildren/certifiedList.vue"
import noPassList from "@/views/driver/DriverListChildren/noPassList.vue"
import waitPassList from "@/views/driver/DriverListChildren/waitPassList.vue"
import httpApi from "@/http";
export default {
    data() {
        return {
            activeName: "first",
        };
    },
    methods: {
        handleClick(tab, event) {
            if (this.activeName == 'first') {
                this.$refs.first.getList();
            } else if (this.activeName == 'second') {
                this.$refs.second.getList();
            } else {
                this.$refs.third.getDriverList();
            }
        }
    },
    mounted() {
        if (this.$route.query.active) {
            this.activeName = this.$route.query.active

        }
    },
    created() {
        this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
        console.log(this.permissions);
    },

    components: {
        breadcrumb,
        noPassList,
        waitPassList,
        certifiedList

    },
};
</script>

<style lang="scss" scoped>
.main {
    .mainTabs {
        ::v-deep .el-tabs__nav {
            margin-left: 38px;
        }

        ::v-deep .el-tabs__nav-scroll {
            background-color: #fff;
        }

        // 标签页切换按钮
        ::v-deep .el-tabs__item {
            height: 50px;
            width: 88px;
            text-align: center;
            padding: 0;
            line-height: 50px;
            font-size: 12px;
            font-weight: bold;
            color: #939393;
        }

        // 下边框
        ::v-deep .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #F0F0F0;
        }

        // 标签页切换按钮 激活样式
        ::v-deep .el-tabs__item.is-active {
            background-color: #ECF5FE;
            color: #1890FF;
        }

        .main_item {
            padding: 0;
            background-color: #fff;
        }
    }

}
</style>
